---
import { Image } from 'astro:assets';
import HoustonLove from '~/assets/houston_love.png';
import Button from '~/components/Button.astro';

const { title, cta } = Astro.props;
---

<div class="discord">
	<h2>{title}</h2>
	<div class="cta">
		<Image src={HoustonLove} alt="" class="hide" />
		<Button variant="secondary" link="https://astro.build/chat">{cta}</Button>
	</div>
</div>

<style>
	.discord {
		margin: 1rem auto 0;
		padding: 4rem 0;
		text-align: center;
	}

	.discord h2 {
		font-size: var(--sl-text-2xl) !important;
		font-weight: 400;
	}

	.discord .cta {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.discord :global(a) {
		color: var(--sl-color-text-accent);
	}
	.discord :global(a:is(:hover, :focus)) {
		color: var(--sl-color-white);
	}

	.hide {
		margin-bottom: -1rem;
		width: 5rem;
		height: 5rem;
	}
</style>
